<template>
  <div class="dialog-container">
    <el-dialog
      title="日志"
      :visible.sync="dialogFormVisible"
      @open="onOpen"
      @opened="onOpened"
      @close="onClose"
      @closed="onClosed"
    >
      <div class="table-container">
        <el-row style="margin-bottom: 10px;">
          <el-button
            icon="el-icon-search"
            type="primary"
            size="mini"
            @click="onSearch"
          >查询</el-button>
          <el-button
            icon="el-icon-close"
            type="danger"
            size="mini"
            @click="onClear"
          >清空</el-button>
        </el-row>
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          :height="550"
          :stripe="true"
          @row-click="rowClick"
        >
          <el-table-column
            type="index"
            width="50"
            label="序号"
            align="center"
            fixed
          />
          <el-table-column
            label="开始时间"
            width="160"
          >
            <template slot-scope="scope">
              {{ scope.row.beginTime && dateFormat(scope.row.beginTime) }}
            </template>
          </el-table-column>
          <el-table-column
            label="结束时间"
            width="160"
          >
            <template slot-scope="scope">
              {{ scope.row.endTime && dateFormat(scope.row.endTime) }}
            </template>
          </el-table-column>
          <el-table-column
            label="耗时"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.consumeTime }}
            </template>
          </el-table-column>
          <el-table-column
            label="响应结果"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.responseMsg }}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="pageVo.currentPage"
          :page-sizes="[15, 50, 100, 500]"
          :page-size="pageVo.pageSize"
          :total="pageVo.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    row: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // ----------------------搜索部分-------------------------
      searchForm: {},
      list: [],
      listLoading: false,
      loading: false,
      dialogFormVisible: false,
      // ----------------------表格部分-------------------------
      // 表格值集
      dataSource: [],
      multipleSelection: [],
      calcTableHeight: '200px',
      pageVo: {
        total: 0,
        status: true,
        pageSize: 15,
        currentPage: 1
      }
    }
  },
  mounted() {
    this.getHeight()
    this.getData()
    this.$nextTick(() => {
      this.calcTableHeight = this.$Utils.setTableHeight(this, 10)
    })
  },
  methods: {
    getHeight() {
      this.$nextTick(() => {
        this.calcTableHeight = this.$Utils.setTableHeight(this)
      })
    },
    // 查询按钮
    onSearch() {
      this.handleCurrentChange(1)
    },
    // 清空按钮
    onClear() {
      for (const i in this.searchForm) {
        this.searchForm[i] = ''
      }
    },
    onOpen() {
      console.log(this.row)
      this.getData()
      this.$nextTick(() => {
        this.calcTableHeight = this.$Utils.setTableHeight(this, 10)
      })
    },
    onOpened() {},
    onClose() {},
    onClosed() {
      this.list = []
      this.$parent.rowData = {}
    },
    // 获取数据
    async getData() {
      this.listLoading = true
      const params = {
        ...this.searchForm,
        taskId: this.row.id,
        pageNum: this.pageVo.currentPage,
        pageSize: this.pageVo.pageSize
      }
      console.log('search params', params)
      this.$store.dispatch('system/jobLog/jobLogPage', params).then((data) => {
        var records = data.records
        this.list = records
        this.pageVo.total = data.total
        setInterval(() => {
          this.listLoading = false
        }, 300)
      })
    },
    rowClick(row, column, event) {
      this.selectRow = row
      console.log(row)
    },
    dateFormat(date) {
      if (date === undefined) {
        return ''
      }
      return this.$Utils.formatDate(new Date(date))
    },
    // 页码改变事件``
    handleCurrentChange(val) {
      this.pageVo.currentPage = val
      this.getData()
    },
    // 页数改变事件
    handleSizeChange(val) {
      this.pageVo.pageSize = val
      this.pageVo.currentPage = 1
      this.getData()
    },
    // 多选框触发事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog-container {
  .el-dialog__body {
    background-color: #eef4f9;
  }
  .el-table .warning-row {
    background: rgb(156, 205, 205);
  }
  .el-table .success-row {
    background: rgb(255, 255, 225);
  }
  .table-container {
    margin-top: 0px;
  }
}
</style>
